<template>
    <div>
        <ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media" v-for="item in messageList" :key="item.id">
					<router-link :to="'/home/newsinfo/'+item.id">
						<img class="mui-media-object mui-pull-left" :src="item.img_url">
						<div class="mui-media-body">
							<h1>{{item.title}}</h1>
							<p class='mui-ellipsis'>
                                <span>发表时间：{{new Date() | dateFormat}}</span>
                                <span>点击：{{item.click}}次</span>
                            </p>
						</div>
					</router-link>
				</li>
			</ul>
    </div>
</template>


<script>
import {newslist} from './../../comment/data/taskDetail.js'
export default {
    // 是一个方法。
    data() {
        return {
            messageList: [],
        }
    },

    created(){
        this.getNewsList();

    },

    methods:{
        getNewsList(){
            this.messageList = newslist;
            // this.$http.get('api/getnewslist')
            // .then(result => {

            // })
        }
    }
    
}
</script>


<style lang="scss" scoped>
.mui-table-view{
    li{
        h1 {
            font-size: 14px;
        }
        /* fflex 布局
        https://www.jianshu.com/p/d9373a86b748
            Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

            flex:6大属性

            1: flex-direction 容器内元素的排列方向(默认横向排列): 
                1.1：flex-direction:row; 沿水平主轴让元素从左向右排列
                1.2：flex-direction:column; 让元素沿垂直主轴从上到下垂直排列

            2: flex-wrap 容器内元素的换行(默认不换行)
                2.1：flex-wrap: nowrap; (默认)元素不换行,比如：一个div宽度100%，设置此属性，2个div宽度就自动变成各50%；
                2.2：flex-wrap: wrap; 元素换行,比如：一个div宽度100%，设置此属性，第二个div就在第二行了；

            3:justify-content 元素在主轴（页面）上的排列
                3.1：justify-content : center;元素在主轴（页面）上居中排列
                3.2：justify-content : flex-start;元素在主轴（页面）上由左或者上开始排列
                3.3：justify-content : flex-end;元素在主轴（页面）上由右或者下开始排列
                3.4：justify-content : space-between;元素在主轴（页面）上左右两端或者上下两端开始排列
                3.5：justify-content : space-around;每个元素两侧的间隔相等。所以，元素之间的间隔比元素与边框的间隔大一倍。

            4： align-items 元素在主轴（页面）当前行的横轴（纵轴）方向上的对齐方式
                    4.1：align-items : flex-start; 弹性盒子元素的横轴（纵轴）起始位置的边界紧靠住该行的横轴起始边界（靠上对齐）。
                    4.2：align-items : flex-end; 弹性盒子元素的横轴（纵轴）起始位置的边界紧靠住该行的横轴结束边界。（靠下对齐）
                    4.3：align-items : center; 弹性盒子元素在该行的横轴（纵轴）上居中放置。（居中对齐）
                    4.4：align-items : baseline; 如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。（靠上对齐）

            5：align-content 在弹性容器内的元素没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）
            
        */ 
        .mui-ellipsis {
            font-size: 12px;
            color: #226aff;
            display: flex;
            justify-content: space-between; 
        }
    }
}
</style>